<%--
  Created by IntelliJ IDEA.
  User: 86150
  Date: 2022/12/22
  Time: 20:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>查询所有</title>
</head>
<body>
    <input type="button" id="add" size="3" value="添加" />
    <form id="myform" action="" method="post" hidden>
        用户名：<input type="text" name="uname" id="uname"><br>
        密码：<input type="password" name="upassword"><br>
        性别:<input type="radio" name="usex" value="男">男
        <input type="radio" name="usex" value="女">女<br>
        <input type="button" onclick="addUser()" value="添加">
    </form>

<table border="1" cellspacing="0">
    <tr>
        <td>id</td>
        <td>uname</td>
        <td>upassword</td>
        <td>usex</td>
    </tr>
    <tbody id="tb">

    </tbody>
</table>
</body>
<script src="static/jquery-3.6.0.js"></script>
<script>
    /**
     * 显示所有
     */
    $(function () {
       queryAll()
    });
    function queryAll(){
        $.get("queryAll", function (data) {
            var trs = "";
            for (let i = 0; i < data.length; i++) {
                trs += "<tr>" +
                    "<td>" + data[i].uid + "</td>" +
                    "<td>" + data[i].uname + "</td>" +
                    "<td>" + data[i].upassword + "</td>" +
                    "<td>" + data[i].usex + "</td>" +
                    "</tr>"
            }
            $("#tb").html(trs);
        })
    }

    $("#add").on("click", function () {
        document.getElementById("myform").style.display="block";
        document.getElementById("add").style.display="none";
    })

    /**
     * 添加
     */
    function addUser() {
        let uname = $("#uname").val()
        if (uname.length == 0) {
            alert("添加失败")
            document.getElementById("myform").style.display = "none";
            document.getElementById("add").style.display = "block";
        } else {
            $.get("addUser",
                $("#myform").serialize(),
                function (date) {
                    queryAll();
                    document.getElementById("myform").style.display = "none";
                    document.getElementById("add").style.display = "block";
                });
        }
    }
</script>
</html>
